<template>
    <div>
        <el-col :span="24">
            <Options label="地区" :options="val.regions" />
            <el-divider />
            <Options label="版本" :options="val.versions" />
            <el-divider />
            <Options label="年份" :options="val.years" />
            <el-divider />
            <Options label="季度" :options="val.quarters" />
            <el-divider />
            <Options label="状态" :options="val.states" />
            <el-divider />
            <Options label="类型" :options="val.types" />
            <el-divider />
            <Options label="排序" :options="val.sortOptions" />
            <el-divider />
        </el-col>
        <ul v-infinite-scroll="load" class="list" :infinite-scroll-disabled="disabled">
            <li v-for="index in count" :key="index" class="list-card" @mouseover="handleMouseover(index)"
                @mouseout="handleMouseout">
                <AnimeCard />
                <div class="card-shadow" :class="{ 'hovered': isHovered === index }">
                    <n-scrollbar>
                        “我想成为一个影之实力者！”既不是英雄也不是Boss，而是一个想通过影子介入案件以显示压倒性能力的人。转世的主角希德·卡盖诺（SidKagenow）年轻时就获得了压倒性的力量，但他却假装自己是影子的微薄者。希德曾帮助一个患有一种被称为“恶魔凭依”的奇怪疾病的女孩，他说这种疾病实际上是恶魔Diabolus的诅咒，而在暗中，名为“Diabolus
                        Order”的组织正在逐渐变暗。他讲出了他当场思考的谎言，并让她参与到为世界着想的阴影战斗中。故事开始于“Diabolos勋章”的实际存在，而他的帮助下的女孩在不知不觉中扩大了组织，尽管他打算享受他想到的环境。“我想成为一个影之实力者！”既不是英雄也不是Boss，而是一个想通过影子介入案件以显示压倒性能力的人。转世的主角希德·卡盖诺（SidKagenow）年轻时就获得了压倒性的力量，但他却假装自己是影子的微薄者。希德曾帮助一个患有一种被称为“恶魔凭依”的奇怪疾病的女孩，他说这种疾病实际上是恶魔Diabolus的诅咒，而在暗中，名为“Diabolus
                        “我想成为一个影之实力者！”既不是英雄也不是Boss，而是一个想通过影子介入案件以显示压倒性能力的人。转世的主角希德·卡盖诺（SidKagenow）年轻时就获得了压倒性的力量，但他却假装自己是影子的微薄者。希德曾帮助一个患有一种被称为“恶魔凭依”的奇怪疾病的女孩，他说这种疾病实际上是恶魔Diabolus的诅咒，而在暗中，名为“Diabolus
                        Order”的组织正在逐渐变暗。他讲出了他当场思考的谎言，并让她参与到为世界着想的阴影战斗中。故事开始于“Diabolos勋章”的实际存在，而他的帮助下的女孩在不知不觉中扩大了组织，尽管他打算享受他想到的环境。“我想成为一个影之实力者！”既不是英雄也不是Boss，而是一个想通过影子介入案件以显示压倒性能力的人。转世的主角希德·卡盖诺（SidKagenow）年轻时就获得了压倒性的力量，但他却假装自己是影子的微薄者。希德曾帮助一个患有一种被称为“恶魔凭依”的奇怪疾病的女孩，他说这种疾病实际上是恶魔Diabolus的诅咒，而在暗中，名为“Diabolus
                    </n-scrollbar>
                </div>
            </li>
        </ul>
        <p v-if="loading" v-loading="loading" element-loading-text="加载中..."></p>
        <p v-if="noMore">没有更多啦...</p>
    </div>
</template>

<script setup>
import debounce from '@/js/debounce'
import AnimeCard from '@/components/Card/anime/index.vue'

const val = {
    regions: ['全部', '中国', '日本', '欧美'],
    versions: ['全部', 'TV', '剧场版', 'OVA', '特摄'],
    years: ['全部', ...Array.from({ length: 34 }, (_, i) => 2023 - i)],
    quarters: ['全部', '1月', '4月', '7月', '10月'],
    states: ['全部', '连载', '完结', '未播放'],
    types: ['全部', '校园', '热血', 'BL', '爱情', '百合', '战斗', '竞技', '青春', '励志', '治愈', '抑郁', '运动',
        '冒险', '后宫', '异世界', '推理', '奇幻', '恐怖', '职场', '伪娘', '偶像', '泡面番', '乙女', '其他'],
    sortOptions: ['全部', '播放量', '爱心量', '评分'],
}

const count = ref(24);
const loading = ref(false);
const noMore = computed(() => count.value >= 200)
const disabled = computed(() => loading.value || noMore.value)
const load = () => {
    loading.value = true
    setTimeout(() => {
        count.value += 6
        loading.value = false
    }, 2000)
}

// 防抖
const isHovered = ref(false);

const handleMouseover = debounce((index) => {
    isHovered.value = index; // 悬停时，启动动画
});

const handleMouseout = debounce(() => {
    isHovered.value = null; // 不再悬停时，停止动画
});
</script>

<style scoped>
.el-divider {
    margin: 0;
}

/* 无限加载卡片 */
.card-shadow {
    z-index: 100;
    position: relative;
    bottom: 400px;
    width: 100%;
    height: 100%;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    transform: rotateX(-90deg);
    flex-direction: column;
    transform-origin: bottom;
    transition: 0.7s ease;
}

.card-shadow.hovered {
    transform: rotateX(0);
}

p {
    float: left;
    width: 100%;
    padding: 20px 0;
    text-align: center;
}
</style>
